import React, { FC, memo, useCallback, useRef, useState } from 'react';
import { Button, Drawer, Dropdown, Input, Menu, message, Switch } from 'antd';
import styles from './toolBar.module.less';

import { FetchMinerParams } from '@/hooks/swr/useFetchMinerSwr';
import AutoRefreshSwitch from '@/components/auto-refresh-switch/AutoRefreshSwitch';
import MinerOrderDropDown from '@/components/order-dropdown/MinerOrderDropdown';
import SearchIcon from '@/components/search-drawer/SearchIcon';

interface IToolBarProps {
  isAutoReFresh: boolean;
  setIsAutoReFresh: (isAutoReFresh: boolean) => any;
  setParams: (params: Omit<keyof FetchMinerParams, any>) => void;
  loading: boolean;
  search: string;
  toggleAll: () => void;
}

const ToolBar: FC<IToolBarProps> = (props) => {
  const {
    isAutoReFresh,
    setIsAutoReFresh,
    search,
    setParams,
    loading,
    toggleAll,
  } = props;

  const handleSearch = (value: string) => {
    setParams({
      page: 1,
      search: value,
    });
  };

  return (
    <>
      <div className={`${styles.toolBar} flex ai-center jc-between`}>
        <Button onClick={() => toggleAll()}>全选</Button>

        <MinerOrderDropDown
          handleOrder={(order) =>
            setParams({
              page: 1,
              order: order,
            })
          }
        />

        <AutoRefreshSwitch
          checked={isAutoReFresh}
          handleAutoRefreshChange={setIsAutoReFresh}
          loading={loading}
        />

        <SearchIcon placeholder="矿机搜索" handleSearch={handleSearch} />
      </div>
    </>
  );
};

export default memo(ToolBar);
